<template>
  <div>
      <div class="main">
          <div class="main-photo"><img :src="img" alt=""></div>
          <div class="main-text"><p>{{name | sub}}</p></div>
          <div class="main-pirce">￥{{pirce}}.00</div>
      </div>
  </div>
</template>

<script>
export default {
    props:["img","name","pirce"],
    filters: {
    sub(val) {
      return val.substring(0, 15) + "...";
    },
  },
}
</script>

<style scoped>
    .main{
        display: inline-block;
        width: 2rem;
        background: #FFFFFF;
        padding: 0 0.25rem;
    }
    .main-photo{
        width: 2rem;
        height: 2rem;
    }
    .main-photo img{
        width: 2rem;
        height: 2rem;
    }
    .main-text{
        width: 2rem;
    }
    .main-pirce{
        color: red;
        font-weight: bold;
    }
</style>